@(project: String, resourceLoader: org.silkframework.runtime.resource.ResourceLoader)

@import controllers.workspace.routes.Assets

@widgets.dialog(title = "Manage Resources", width = 500) {
<div class="mdl-grid" style="width: 500px">

  <div id="resource-resources-box" class="mdl-cell mdl-cell--12-col">
    @for((resource, index) <- resourceLoader.listRecursive.zipWithIndex) {
    <div id="resource@index" class="resource-chip mdl-shadow--2dp">
      <span class="resource-chip-label">@resource</span>
      <!--
      <img class="button-delete" title="Delete" onclick="deleteResourceDialog(@index, '@resource')" src="@Assets.at("img/cross.png")" />
      <img class="button-export" title="Download" onclick="getResource('@resource')" src="@Assets.at("img/document-export.png")" />
      -->
      <i class="material-icons resource-chip-icon" onclick="getResource('@resource');">file_download</i>
      <i class="material-icons resource-chip-icon" onclick="deleteResource('@resource');">clear</i>
    </div>
    }
  </div>

  <div id="resource-tab-panels" class="mdl-cell mdl-cell--12-col">
    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
      <div class="mdl-tabs__tab-bar">
        <a id="resources-upload-panel-tag" href="#resources-upload-panel" class="mdl-tabs__tab is-active">Upload Local</a>
        <div class="mdl-tooltip mdl-tooltip--large" for="resources-upload-panel-tag">
          Upload an input resource from a local file.
        </div>
        <a id="resources-import-panel-tag" href="#resources-import-panel" class="mdl-tabs__tab">Import from URL</a>
        <div class="mdl-tooltip mdl-tooltip--large" for="resources-import-panel-tag">
          Import an input resource from an external URL.
        </div>
        <a id="resources-output-panel-tag" href="#resources-output-panel" class="mdl-tabs__tab">Define Output</a>
        <div class="mdl-tooltip mdl-tooltip--large" for="resources-output-panel-tag">
          Create a new output resource.
        </div>
      </div>

      <div class="mdl-tabs__panel is-active" id="resources-upload-panel">
        <div class="mdl-file-upload">
          <input id="upload_file" name="upload_file" type="file"/>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="upload_resource_name" name="upload_resource_name" value="unnamed"/>
          <label class="mdl-textfield__label" for="upload_resource_name">Name</label>
        </div>
      </div>
      <div class="mdl-tabs__panel" id="resources-import-panel">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="import_url" name="import_url"/>
          <label class="mdl-textfield__label" for="import_url">URL</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="import_resource_name" name="import_resource_name" value="unnamed"/>
          <label class="mdl-textfield__label" for="import_resource_name">Name</label>
        </div>
      </div>
      <div class="mdl-tabs__panel" id="resources-output-panel">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="output_resource_name" name="output_resource_name" value="unnamed"/>
          <label class="mdl-textfield__label" for="output_resource_name">Name</label>
        </div>
      </div>
    </div>
  </div>

</div>

  <div id="delete-dialog" >
    <p>
      <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
      Delete resource?
    </p>
  </div>

  <script type="text/javascript">
    // Initialization

    var buttonNames = {
      "resources-upload-panel-tag": "Upload" ,
      "resources-import-panel-tag": "Import" ,
      "resources-output-panel-tag": "Create"
    }

    $("#dialog-submit-button").text(buttonNames["resources-upload-panel-tag"]);

    $(function() {
      $("#primary_dialog .mdl-tabs__tab").click(function() {
        var currentPanel = $(this).attr("id");
        $("#dialog-submit-button").text(buttonNames[currentPanel]);
      });


      // automatically set the resource name based on the file chosen
      $("#upload_file").change(function() {
        var name=$("#upload_file").val().split(/(\\|\/)/g).pop();
        $("#upload_resource_name").val(name);
      });

      // automatically set the resource name based in the URI entered
      $("#import_url").change(function() {
        var parser = document.createElement('a');
        parser.href = $(this).val();
        var name = parser.pathname.split(/(\/)/g).pop();
        $("#import_resource_name").val(name);
      });

      // Initialize the delete dialog
      $("#delete-dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
          Cancel: function() {
            $(this).dialog("close");
          },
          Yes: function() {
            deleteResource($(this).data('resourceIndex'), $(this).data('resourceName'));
            $(this).dialog("close");
          },
        }
      });

    });

    // Opens the delete dialog
    function deleteResourceDialog(index, name) {
      $('#delete-dialog').data('resourceName', name);
      $('#delete-dialog').data('resourceIndex', index);
      $("#delete-dialog").dialog("open");
    }

    // Downloads a resource
    function getResource(name) {
      window.location = '@config.baseUrl/workspace/projects/@project/resources/' + name.replace(/\//g,"%2F")
    }

    function deleteResource(name) {
      var path = '@config.baseUrl/workspace/projects/@project/resources/' + name;
      deleteResourceConfirm(name, path);
    }

    // Deletes a resource
    function _deleteResource(name) {


      $.ajax({
        type: 'DELETE',
        url: '@config.baseUrl/workspace/projects/@project/resources/' + name.replace(/\//g,"%2F"),
        success: function(data) {
          reloadDialog();
        },
        error: function(request) {
          alert(request.responseText);
        }
      });
    }

    // Uploads a resource
    function uploadResource() {
      var name = $("#upload_resource_name").val();
      var file = $('#upload_file')[0].files[0];
      var formData = new FormData();
      formData.append('file', file);

      $('#dialog-progress-spinner').show();
      $.ajax({
        type: 'PUT',
        url: '@config.baseUrl/workspace/projects/@project/resources/' + name.replace(/\//g,"%2F"),
        xhr: function() {
          myXhr = $.ajaxSettings.xhr();
          return myXhr;
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function() {
          $('#dialog-progress-spinner').hide();
          reloadDialog();
        },
        error: function(request) {
          $('#dialog-progress-spinner').hide();
          alert(request.responseText);
        }
      });
    }

    // Adds a new URL resource
    function addUrlResource() {
      var name = $("#import_resource_name").val();
      var url = $("#import_url").val();
      var formData = new FormData();
      formData.append('resource-url', url);

      $('#dialog-progress-spinner').show();
      $.ajax({
        type: 'PUT',
        url: '@config.baseUrl/workspace/projects/@project/resources/' + name,
        xhr: function() {
          myXhr = $.ajaxSettings.xhr();
          return myXhr;
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function() {
          $('#dialog-progress-spinner').hide();
          reloadDialog();
        },
        error: function(request) {
          $('#dialog-progress-spinner').hide();
          alert(request.responseText);
        }
      });
    }

    // Creates a new resource
    function newResource() {
      var name = $("#output_resource_name").val();
      $.ajax({
        type: 'PUT',
        url: '@config.baseUrl/workspace/projects/@project/resources/' + name.replace(/\//g,"%2F"),
        success: function() {
          reloadDialog();
        },
        error: function(request) {
          alert(request.responseText);
        }
      });
    }

    function submit() {
      var currentPanel = $("#primary_dialog .mdl-tabs__panel.is-active").attr("id");
      switch(currentPanel) {
        case "resources-upload-panel":
          uploadResource();
          break;
        case "resources-import-panel":
          addUrlResource();
          break;
        case "resources-output-panel":
          newResource();
          break;
      }
    }
  </script>
}